import LazyLoad from 'react-lazyload'
// import { Suspense } from 'react';
import MyLzayLoad from './MyLzayLoad'
// 注意：若遇到类型错误，可尝试运行 `npm i --save-dev @types/react-lazyload`
// 或者添加一个包含 `declare module 'react-lazyload';` 的新声明(.d.ts)文件
import img from './images/1.jpg'
import React from 'react';
const Hello = React.lazy(() => import('./components/hello'))
export default function App() {
  return (
    <div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
      <p>11</p>
      <p>12</p>
      <p>13</p>
      <p>14</p>
      <p>15</p>
      <p>16</p>
      <p>17</p>
      <p>18</p>
      <p>19</p>
      <p>20</p>
      <p>21</p>
      <p>22</p>
      <p>23</p>
      <p>24</p>
      <p>25</p>
      <p>26</p>
      <p>27</p>
      <p>28</p>
      <p>29</p>
      <p>30</p>
      <p>31</p>
      <LazyLoad placeholder={<div>loading...</div>} offset={100}>
        <Hello />
      </LazyLoad>
      <LazyLoad placeholder={<div>loading...</div>}>
        <img src={img} alt="" width={300} />
      </LazyLoad>
      {/* <Suspense fallback={<div>loading...</div>} >
        <Hello />
      </Suspense> */}
      <MyLzayLoad placeholder={<div>loading...</div>}>
        <img src={img} alt="" width={300} />
      </MyLzayLoad>
    </div>
  )
}
